<template>
  <div :data-clazz="model.clazz" class="flow" v-if="model.clazz == 'flow'">
    <div class="panelTitle">{{ i18n["sequenceFlow"] }}</div>
    <el-form label-width="80px">
      <el-form-item :label="i18n['label']">
        <DefaultDetail
          :model="model"
          :onChange="onChange"
          :readOnly="readOnly"
        />
      </el-form-item>
      <el-form-item label="事项字段">
        <el-checkbox-group
          v-model="itemArr"
          @change="
            (value) => {
              onChange('itemCondition', '0'), onChange('itemField', value);
            }
          "
        >
          <el-checkbox
            v-for="item in itemArrs"
            :label="item.label"
            :key="item.id"
            >{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-if="itemArr.length > 0" label-width="0px">
        <div v-for="(i, index) in model.itemField" :key="index" class="groups">
          <el-tooltip class="item" effect="light" :content=" i.fileName" placement="top">
            <el-button size="small">{{ i.fileName }}</el-button>
          </el-tooltip>
          <el-select v-model="i.compareSymbol" placeholder="请选择" size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input v-model="i.fileValue" size="small"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="执行条件" v-if="itemArr.length > 0">
        <el-radio-group
          v-model="model.itemCondition"
          @change="
            (value) => {
              onChange('itemCondition', value);
            }
          "
        >
          <el-radio label="0">或</el-radio>
          <el-radio label="1">且</el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item label="系统字段">
        <el-checkbox-group
          v-model="systemArr"
          @change="
            (value) => {
              onChange('systemCondition', '0'), onChange('systemField', value);
            }
          "
        >
          <el-checkbox
            v-for="item in systemArrs"
            :label="item.label"
            :key="item.id"
            >{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-if="systemArr.length > 0" label-width="0px">
        <div v-for="(i, index) in model.systemField" :key="index" class="groups">
          <el-tooltip class="item" effect="light" :content=" i.fileName" placement="top">
            <el-button size="small">{{ i.fileName }}</el-button>
          </el-tooltip>
          <el-select v-model="i.compareSymbol" placeholder="请选择" size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input v-model="i.fileValue" size="small"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="执行条件" v-if="systemArr.length > 0">
        <el-radio-group
          v-model="model.systemCondition"
          @change="
            (value) => {
              onChange('systemCondition', value);
            }
          "
        >
          <el-radio label="0">或</el-radio>
          <el-radio label="1">且</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <!-- <div class="panelBody">
      <DefaultDetail :model="model" :onChange="onChange" :readOnly="readOnly" />
      <div class="panelRow">
        <div>事项字段 执行条件:</div>
      </div>
      <div class="panelRow">
        <el-checkbox-group
          v-model="funcArr"
          @change="
            (value) => {
              onChange('itemField', value);
            }
          "
        >
          <el-checkbox
            v-for="item in funcArrs"
            :label="item.label"
            :key="item.id"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div class="panelRow" v-if="funcArr.length > 0">
        <div v-for="(i, index) in model.itemField" :key="index">
          <el-button>{{ i.label }}</el-button>
          <el-select v-model="i.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input v-model="i.condition"></el-input>
        </div>
      </div>
      <div class="panelRow">
        <div>{{ i18n["sequenceFlow.expression"] }}：</div>
        <el-input
          style="width:90%; font-size:12px"
          type="textarea"
          :rows="4"
          :disabled="readOnly"
          :value="model.conditionExpression"
          @input="
            (value) => {
              onChange('conditionExpression', value);
            }
          "
        />
      </div>
      <div class="panelRow">
        <div>{{ i18n["sequenceFlow.seq"] }}：</div>
        <el-input
          style="width:90%; font-size:12px"
          :disabled="readOnly"
          :value="model.seq"
          @input="
            (value) => {
              onChange('seq', value);
            }
          "
        />
      </div>
      <div class="panelRow">
        <el-checkbox
          @change="(value) => onChange('reverse', value)"
          :disabled="readOnly"
          :value="!!model.reverse"
          >{{ i18n["sequenceFlow.reverse"] }}</el-checkbox
        >
      </div>
    </div> -->
  </div>
</template>
<script>
import DefaultDetail from "./DefaultDetail";
export default {
  inject: ["i18n"],
  components: {
    DefaultDetail,
  },
  props: {
    model: {
      type: Object,
      default: () => ({}),
    },
    onChange: {
      type: Function,
      default: () => {},
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      options: [
        {
          value: "0",
          label: ">",
        },
        {
          value: "1",
          label: "<",
        },
        {
          value: "2",
          label: "=",
        },
        {
          value: "3",
          label: "<=",
        },
        {
          value: "4",
          label: ">=",
        },
        {
          value: "5",
          label: "!=",
        }
      ],
      itemArr: [],
      systemArr: [],
      // itemField:[]
      itemArrs: [
        {
          id: "1",
          label: "篮球",
        },
        {
          id: "2",
          label: "足球球篮球球篮球",
        },
        {
          id: "3",
          label: "排球",
        },
      ],
      systemArrs: [
        {
          id: "1",
          label: "语文",
        },
        {
          id: "2",
          label: "数学",
        },
        {
          id: "3",
          label: "英语",
        },
      ]
    };
  },
  mounted() {
    console.log(this.model);
    this.$nextTick(() => {
      this.itemArr = [];
      this.systemArr = []
      let params = [];
      let arrs = []
      if (this.model.itemField) {
        this.model.itemField.forEach((i) => {
          this.itemArr.push(i.fileName);
        });
        // this.$set(this.itemArr,params)
        // this.itemArr = params;
        this.$forceUpdate();
      }
      if (this.model.systemField) {
        this.model.systemField.forEach((i) => {
          this.systemArr.push(i.fileName);
        });
        // this.$set(this.systemArr,arrs)
        // this.itemArr = arrs;
        this.$forceUpdate();
      }
      // this.$set(this.model,'funcArr',this.model.funcArr)
    });
  },
  watch: {
    model: {
      handler: function(val, oldval) {
        // console.log(val)
        if (val.hasOwnProperty("itemArr")) {
          this.itemArr = val.itemArr;
        } else {
          this.itemArr = [];
        }
        if (val.hasOwnProperty("systemArr")) {
          this.systemArr = val.systemArr;
        } else {
          this.systemArr = [];
        }
      },
      deep: true, //对象内部的属性监听，也叫深度监听
    },
  },
  // computed:{
  //   funcArr(){
  //     return {

  //     }
  //   }
  // }
};
</script>
<style lang="scss" scoped>
.flow {
  .panelTitle{
    color:#fff;
    // background:
    background:#3a8ee6;
    text-align: center;
    line-height:32px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .el-checkbox-group{
    // text-align: left;
    // display:inline-block;
    // width: 100px;
    //   text-overflow: ellipsis;
    //   white-space: nowrap;
    //   line-height:40px;
    //   text-align: left;
  }
  .groups {
    padding-left:10px;
    box-sizing: border-box;
    /deep/ .el-button {
      width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 9px 5px;
    }
    /deep/ .el-select {
      width: 100px;
      margin-left:10px;
    }
    /deep/ .el-select > .el-input {
      display: inline-block;
    }
    /deep/ .el-input {
      width: 90px;
    }
  }
}
</style>
